<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>兮家手册</title>
    <link rel="icon" href="/base/pic/icon/xijia.png" type="image/x-icon">           <!--在网页标题左侧显示图标-->
    <link rel="shortcut icon" href="/base/pic/icon/xijia.png" type="image/x-icon"> <!-- 在收藏夹显示图标-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">

    <!-- 页面解析markdown为HTML显示需要的css -->
    <link rel="stylesheet" href="/components/editor/css/editormd.css">


    <script src='/base/js/jquery-3.4.1.min.js'></script>
    <script src="/base/js/app.js"></script>
    <script type="text/javascript" src="/components/editor/editormd.js"></script>

    <link rel="stylesheet" href="/components/editor/css/editormd.preview.min.css"/>
    <!-- markdown解析成HTML显示需要的js -->
    <script src="/components/editor/lib/marked.min.js"></script>
    <script src="/components/editor/lib/prettify.min.js"></script>
    <script src="/components/editor/lib/raphael.min.js"></script>
    <script src="/components/editor/lib/underscore.min.js"></script>
    <script src="/components/editor/lib/sequence-diagram.min.js"></script>
    <script src="/components/editor/lib/flowchart.min.js"></script>
    <script src="/components/editor/lib/jquery.flowchart.min.js"></script>
    <!-- 当前页js css-->
    <script src="/modules/admin/help-index.js"></script>
    <link rel="stylesheet" href="/modules/css/admin/help-index.css">

    <!-- 图片放大 -->
    <link rel="stylesheet" href="/components/picEnlarge/picEnlarge.css">
    <script src="/components/picEnlarge/picEnlarge.js"></script>
   <!-- <script src="/components/picEnlarge/scale.js"></script>-->

    <!-- jq 插件，鼠标效果 -->
    <!-- <script src="/components/fairy/js/batsCursor.js" type="text/javascript"></script>-->
    <!--  <script src=”js/fairyDustCursor.js” type=”text/javascript”></script>-->
    <!--  <script src=”js/emojiCursor.js” type=”text/javascript”></script>-->
    <!--  <script src=”js/bubbleCursor.js” type=”text/javascript”></script>-->
    <!--  <script src=”js/batsCursor.js” type=”text/javascript”></script>-->
    <!--  <script src=”js/snowflakeCursor.js” type=”text/javascript”></script>-->
</head>

<style>
    body {
        background-color: #e5e8ff;
        opacity: 0.9;
        background: url(/base/pic/bj/loginbj/1.jpg);
    }

    .helpMenu {
        width: 100%;
    }
</style>

<body>


<!-- 悬浮按钮（手机打开展示）-->
<div id="isMenuShop" onclick="menuShop()" style="
                                              z-index: 9999;
                                              /*width:18%;*/
                                              /*height:94%;*/
                                              overflow-y:auto;
                                              display: none;
                                              position: fixed;
                                              top:2%;
                                              left:2.5%;
                                               border-style:none;
                                              ">
    <button type="button"  class="layui-btn layui-btn-primary  layui-btn-xs">菜单</button>
</div>

<!-- 标题和左菜单区  -->
<div id="helpMenuDiv" class="layui-container scrollBar" style="
                                              width:18%;
                                              height:94%;
                                              overflow-y:auto;
                                              background-color:#ffffff;
                                              display: block;
                                              position: fixed;
                                              top:2%;
                                              left:3%;
                                              text-decoration: none;
                                              ">

    <!-- 标题 -->
    <div style="width: 100%; border: 1px none #dad8d5;border-bottom-style: solid;"> <!--div 指定下边有线 -->
        <span id="" style="font-size: 22px; line-height: 75px;margin-left: 10% ">
            兮家手册
            <span style="font-size: 16px;"> (0.x)</span>
        </span>
    </div>


    <!-- 左菜单区  -->
    <div id="helpMenu">
        <!-- 动态获取 -->
        <!--        <div>-->
        <!--            <div class="oneTitle">一级目录</div>-->
        <!--            <div value="" class="twoTitle" onclick="getHelp(this)" onmouseover="place(this)" onmouseout="moveAway(this)">二级目录</div>-->
        <!--            <div class="twoTitle" onclick="getHelp(this)" onmouseover="place(this)" onmouseout="moveAway(this)">二级目录</div>-->
        <!--            <div class="twoTitle" onclick="getHelp(this)" onmouseover="place(this)" onmouseout="moveAway(this)">二级目录</div>-->
        <!--        </div>-->
    </div>
</div>

<!-- 内容区，  内容标题+ 内容(页面解析markdown为HTML显示) -->
<div id="contentMd" class="scrollBar" style="
                                 width:56%;
                                 height:94%;
                                 overflow-y:auto;
                                 background-color:#ffffff;
                                 display: block;
                                 position: fixed;
                                 top:2%;
                                 left:22%;
                                 text-decoration: none;
                                 ">
    <!--标题-->
    <div style="width: 88%; margin-left: 2% ;border: 1px none #dad8d5;border-bottom-style: solid;"> <!--div 指定下边有线 -->
        <span id="title" style="font-size: 22px; line-height: 75px;"></span>
    </div>
    <!--内容-->
    <div id="markdownToHTML" style="width: 88%">
        <textarea class="page" id="content" style="display:none;" placeholder=""></textarea>
    </div>
</div>


<!-- 内容菜单菜单，动态生成标题菜单 -->
<div id="contentTitleDiv" class="scrollBar" style="width:18%;
                                 height:94%;
                                 overflow-y:auto;
                                 background-color:#ffffff;
                                 display: block;
                                 position: fixed;
                                 top:2%; left:79%;
                                 text-decoration: none;
                                ">
    <div id="contentTitle" class="easyeditor-content" style="margin-left: 5%">
    </div>
</div>

<!-- 底部 -->
<!--<div class="scrollBar" style="width:94%;-->
<!--                                 height:8%;-->
<!--                                 overflow-y:auto;-->
<!--                                 background-color:#ff5783;-->
<!--                                 display: block;-->
<!--                                 position: fixed;-->
<!--                                 top:91%; left:3%;-->
<!--                                 text-decoration: none;-->
<!--                                ">-->
<!--     <div style="margin-left: 5%">-->
<!--    </div>-->
<!--</div>-->
</body>

<script>
    // 如果为移动设备访问，展示内容，不展示左菜单和右内容菜单
    mobileReveal();
    /**
     * 加载文章
     */
    var myEditor;

    function help(id) {
        let res = Ajax.get(path + "/admin/xj/adminHelp/findById?id=" + id);
        // 先清空，再添加 textarea 用于存放回显的 md 源码, 解决在弹出框中进行预览时，第二次预览无法刷新的问题
        $('#markdownToHTML').empty();
        $('#markdownToHTML').append('<textarea id="content" style="display:none;" placeholder="markdown语言"></textarea>');
        //
        $("#content").val(res.data.content); //.replaceAll(">", "&gt;").replaceAll("<", "&lt;")
        myEditor = editormd.markdownToHTML("markdownToHTML", {
            htmlDecode: "style,script,iframe",
            emoji: true,  // 解析表情
            taskList: true,  // 解析列表
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true  // 默认不解析
        });
        // 标题
        $("#title").html(res.data.title);
        // 生成内容菜单
        generateContentList();
        // 加载所有img可以图片放大
        addExpand();
        /* */
        document.addEventListener("DOMContentLoaded", function(event){
            ImagesZoom.init({
                "elem": ".list"
            });
        }, false);
        // 内容展示(不隐藏)
        $("#contentMd").css("display", "block");
    }
</script>


<script language="javascript" type="text/javascript">
    // 加载左菜单
    let res = Ajax.get(path + "/admin/xj/adminHelp/findTree");
    initMenu(res.data);
    // 加载图片放大插件
    addExpand();


</script>

</html>


